<template>
  <div class="wrapper">
      <el-form ref="form" :model="formModel" :rules="rules"  label-width="80px" class="form">
          <template  v-for="item in formData" >
            <Input :item='item' :key="item.field" :form='formModel' :rules="rules" v-if="item.name ==='Input'"/>
            <Select :item='item' :key="item.field" :form='formModel' :rules="rules" v-if="item.name ==='Select'"/>
          </template>
      </el-form>
  </div>

</template>

<script>
import Input from './formItem/Input'
import Select from './formItem/Select'
export default {
  name: "SearchForm",
  props: {
      formData:{
          type:Array,
          default:{}
      }
  },
components: {Input, Select},
  data () {
    return {
    formModel:{},
    rules: {
    },
    }
  },     
created () {
    let formField={},rules={};
    this.formData.forEach((item)=>{
        formField[item.field] = '';
        rules[item.field] = item.rule;
    })
    this.formModel = formField;
    this.rules = rules;
},
beforeMount(){

},
mounted () {
  
},
watch: {},
computed: {
},
methods: {},
}
</script>
<style scoped>
  .form {
          display: flex;
    flex-wrap: wrap;
  }
</style>